<template>
  <div>
    <div id="vditor"></div>
  </div>
</template>

<script>
import Vditor from "vditor"
import "vditor/src/assets/less/index.less" // import "vditor/dist/index.css"
import {MD_CONTENT, COLOR_SCHEME_CACHE_KEY, DARK_THEME, LIGHT_THEME} from "@/js/constants"

export default {
  name: "VditorEditor",
  data() {
    return {
      contentEditor: null,
    }
  },
  methods: {
    autoSetEditorTheme() {
      // 自动切换编辑器主题
      if (localStorage.getItem(COLOR_SCHEME_CACHE_KEY) === "dark") {
        this.contentEditor.setTheme(DARK_THEME.theme, DARK_THEME.contentTheme, DARK_THEME.codeTheme)
      } else {
        this.contentEditor.setTheme(LIGHT_THEME.theme, LIGHT_THEME.contentTheme, LIGHT_THEME.codeTheme)
      }
    },
  },
  created() {
  },
  mounted() {
    this.contentEditor = new Vditor("vditor", {
      height: 500,
      toolbarConfig: {
        pin: true,
      },
      cache: {
        enable: true,
      },
      tab: "    ",
      value: "",
      placeholder: "挥毫泼墨, 笔走龙蛇。",
      counter: {
        "enable": true
      },
      outline: {
        "enable": true
      },
      debugger: true,
      preview: {
        hljs: {
          lineNumber: true,
        },
        markdown: {
          autoSpace: true,
          fixTermTypo: true,
          toc: true,
          listStyle: true,
          mark: true,
        },
      },
      resize: {
        enable: true,
      },
      after: () => {
        this.autoSetEditorTheme()

        this.contentEditor.setValue(MD_CONTENT)
      },
    })
  }
}
</script>

<style scoped>

#vditor {
  text-align: left;
}

</style>